<template>
	<div id="PermissionManerge">
		<div id="tableList" style="width: 50%; font-size: 10px;" >
			<el-table :data="permissions" style="box-shadow:  0 0 15px lightgray;">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="权限名称" align="center" prop="permissionName" wdith="200">
				</el-table-column>
				<el-table-column label="权限描述" align="center" prop="permissionDesc">
				</el-table-column>
				<el-table-column label="创建时间" align="center" prop="createDate" width="100">
					<template slot-scope="scope">
						{{scope.row.createDate|formate}}
					</template>
				</el-table-column>
				<el-table-column label="父级权限" align="center" prop="parentid">
					<template slot-scope="scope">
						{{scope.row.parentid|firstPermissions(permissions)}}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" @click="deletePermission(scope.row._id)">删除</el-button>
					</template>
				</el-table-column>
				<el-table-column align="right" width="90px">
					<template slot="header" slot-scope="scope" style="width: 2px; height: 2px;">
						<el-button icon="el-icon-plus" circle type="primary" size="mini" @click="showAdd = true"></el-button>
						<el-button icon="el-icon-minus" type="danger" circle size="mini" @click="showClose"></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :total="100">
			</el-pagination>
		</div>
		<el-collapse-transition>
			 <div id="addNews" v-show="showAdd">
				 <div id="title">权限增加</div>
					<div id="addInputBox">
						<el-form status-icon :model="permissionInfo" :rules="rules" ref="inputForm" label-width="100px" class="demo-ruleForm">
						  <el-form-item label="权限名称" prop="permissionName"style="width: 350px;">
						    <el-input type="text" v-model="permissionInfo.permissionName" autocomplete="off"></el-input>
						  </el-form-item>
						  <el-form-item label="权限等级" prop="permissionLeve" style="width: 350px;">
						    <el-input type="text" v-model="permissionInfo.permissionLeve" autocomplete="off"></el-input>
						  </el-form-item>
						  <el-form-item label="权限描述" prop="permissionDesc" style="width: 350px;">
						    <el-input type="text" v-model="permissionInfo.permissionDesc" autocomplete="off"></el-input>
						  </el-form-item>
						  
						  <el-form-item label="权限顺序" prop="permissionSort" style="width: 350px;">
						    <el-input type="text" v-model="permissionInfo.permissionSort" autocomplete="off"></el-input>
						  </el-form-item>
						 <el-form-item label="父级权限" prop="parentid">
							 <el-select v-model="permissionInfo.parentid" placeholder="请选择"  style="margin-bottom: 15px;" >
							   <el-option ref="inputForm"
							 		v-for="item in permissions"
							 		:key="item._id"
							 		:label="item.permissionDesc"
							 		:value="item._id"
									>
							 	  </el-option>
							 </el-select>
						 </el-form-item>
						    <el-button type="primary" @click="addNewsPermissions">提交</el-button>
							<el-button type="danger" @click="replace">重置</el-button>
						  </el-form-item>
						</el-form>
					</div>  
			</div>
			</el-collapse-transition>
	</div>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			return {
				showAdd: false,
				rules: {
					permissionName:[
						{
							required:true,
							message:"请填写权限名称",
							trigger:'blur'
						}
					],
					permissionDesc:[
						{
							required:true,
							message:"请填写权限描述",
							trigger:'blur'
						}
					],
					permissionID:[
						{
							required:true,
							message:"请填写权限ID",
							trigger:'blur'
						}
					],
					permissionLeve:[
						{
							required:true,
							message:"请填写权限等级",
							trigger:'blur'
						}
					]
				},
				permissionInfo:{
					parentid:0
				},
				value:''
			}
		},
		computed: {
			...mapState(['permissions'])
		},
		methods: {
			showClose() {
				this.showAdd = false
				this.$refs['inputForm'].resetFields()
			},
			replace(){
				this.$refs['inputForm'].resetFields();
			},
		async addNewsPermissions(){
				var rs = await this.$http.post(this.$apis.newPermissions,this.permissionInfo);
				this.permissionInfo = rs.data;
				this.$store.dispatch("loadAllPermission");
			},
		deletePermission(id){
				this.deletAction('deletPermissions',{_id:id},"删除权限",()=>{
					this.$store.dispatch("loadAllPermission");
				})
				
			}
		},
		filters: {
			formate(date) {
				var d = new Date(date);
				return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDay()
			},
			firstPermissions(value,permissions){
				console.log(value)
				for(var  i = 0;i<permissions.length;i++){
					if(value === permissions[i]._id ){
						return permissions[i].permissionDesc
					}
				}
			}
		},
		async created(){
			var rs = await this.$http.post(this.$apis.newPermissions);
			this.permissionInfo = rs.data;
		}
	}
</script>

<style lang="scss" scoped>
	#PermissionManerge{
		width: 100%;
		height: 100%;
		display:flex;
		flex-direction: row;
		
		}
		#addNews{
			width: 35%;
			height: 600px;
			background: white;
			margin-left: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow:  0 0 15px lightgray;
			position: relative;
			#title{
				font-size: 20px;
				font-weight: bold;
				position: absolute;
				top:20px;
				left: 0;
				right: 0;
				}
			#addInputBox{
				width:50%;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
			#chekBox{
				width: 100%;
				display: flex;
				justify-content:center;
				align-items: center;
			}
			
	}
</style>
